<template>
  <div class="index underline">
    <Header></Header>
    <div class="main">
      <div class="mianOut">
        <div class="note">
          <p><img src="../../../static/images/sound.png" />提示信息：您的应急预案已经编制完成了，正式发布前还需要组织应急预案评估。</p>
        </div>
        <div class="mianInner1">
          <div class="asTitle">
            <h3>应急预案评估</h3>
          </div>
          <ul class="asList clearfix">
            <li>
              <router-link class="active"
                           to="underlineAssess">线下评估</router-link>
            </li>
            <li>
              <router-link to="onlineAssess">线上评估</router-link>
            </li>
          </ul>
          <p class="process"><i class="el-icon-warning"></i><a download  href="../../../static/评估会议流程.docx">评估会议流程</a></p>
          <div class="downBox clearfix">
            <h4 class="table_tit">应急预案评估材料</h4>
            <a class="download"
               @click="downloadTemp('all')"><i class="el-icon-download"></i>下载模板</a>
          </div>
          <el-table ref="multipleTable"
                    v-loading='loadingFlag'
                    :data="data1"
                    row-key="fileId"
                    @selection-change="handleSelectionChange">
            <el-table-column type="index"
                             align='center'
                             label='序号'
                             width="100">
            </el-table-column>
            <el-table-column label=''
                             :reserve-selection="true"
                             type="selection"
                             align='center'
                             width="100">
            </el-table-column>
            <el-table-column label="评估材料模板"
                             align='center'>
              <template slot-scope="scope">
                <a class="temName"
                   @click="downloadTemp(scope.row.templateId )">{{scope.row.name}}</a>
              </template>
            </el-table-column>
            <el-table-column label="评估材料"
                             align='center'>
              <template slot-scope="scope">
                <div class="upload"
                     v-if='!scope.row.fileId'>
                  <el-upload action="/emergency/v1.0/upload/file"
                             ref="reportUpload"
                             :on-change="changeimg3"
                             :http-request="newload"
                             :show-file-list="false"
                             accept=".xls,.xlsx,.doc,.docx">
                    <el-button class='grp1'>
                      <i class="el-icon-upload2"
                         @click='templateId=scope.row.templateId'>上传</i>
                    </el-button>
                  </el-upload>
                </div>
                <div class="deleteBox"
                     v-else>
                  <a class="matName"
                     @click="downFile(scope.row.reviewId)">{{scope.row.fileName}}</a>
                  <a class="deleteBtn"
                     @click="deleteFile(scope.row.reviewId)">删除</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="mianInner2">
          <div class="asTitle">
            <h3>应急预案汇编修改</h3>
          </div>
          <p><i class="el-icon-warning"></i>如果您需要根据评估意见修改应急预案，请点击下方的应急预案管理进行修改<router-link to='planmanage'
                         class="enterAssess">应急预案管理</router-link>
          </p>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
import config from "../../config.js"
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      loadingFlag: false,
      downIds: [],
      templateId: '',
      formInline: {
        companyEmergencyName: "",
        companyId: "",
        planCategory: ""
      },
      data1: [],
      currentPage: 1,
      total: 10
    };
  },
  created () {
    this.getList()
  },
  methods: {
    changeimg3 () {

    },
    getList () {
      this.$axios
        .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/templatelist?companyId=' + JSON.parse(localStorage.user).companyId)
        .then(res => {
          if (res.data.meta.success) {
            this.data1 = res.data.data
            if( this.data1.length > 0){
               this.data1.map(item=>{
                 switch(item.name){
                   case '要素模板':item.name='要素评估表模板';break;
                   case '形式模板':item.name='形式评估表模板';break;
                   case '附件要素评估模板':item.name='附件要素评估表模板';break;
                   default :item.name='个人评估意见表模板';break;

                 }
               })
            }
          } else {
            this.data1=[]
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    newload (file) {  //企业上传评估材料
      this.loadingFlag = true
      let url = config.baseUrl +"filetemplate/v1.0/uploadfile/uploadreviewdocuments?companyId=" + JSON.parse(localStorage.user).companyId + '&templateId=' + this.templateId;
      var fd = new FormData()
      fd.append('file', file.file)
      let config1 = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(url, fd, config1).then(res => {
        this.loadingFlag = false
        if (res.data.meta.success) {
          this.getList();
          this.$message.success('上传成功')
        } else {
          this.$message({
            message: res.data.meta.message,
            type: 'error'
          });
        }

      })
    },
    deleteFile (id) {
      this.$axios
        .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/delete?id=' + id)
        .then(res => {
          if (res.data.meta.success) {
            this.getList();
            this.$message.success('删除成功')
          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    downFile (id) {
      this.$axios
        .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/querybyid?id=' + id)
        .then(res => {
          if (res.data.meta.success) {
            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = res.data.data;
            document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
              iframe.remove();
            }, 5 * 60 * 1000);
            this.toggleSelection()

          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleSelectionChange (data) {
      this.downIds = data
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    downloadTemp (id) {
      let ids = ''
      if (id != 'all') {
        ids = id
      } else {
        if (this.downIds.length > 0) {
          this.downIds.map(item => {
            ids += item.templateId + ','
          })
          console.log(ids)
        } else {
          this.$message.warning('请选择评估材料模板')
        }
      }
      this.$axios
        .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/templatefile?templateIds=' + ids)
        .then(res => {
          if (res.data.meta.success) {
            if (res.data.data.length > 0) {
              res.data.data.map(item => {
                const iframe = document.createElement("iframe");
                iframe.style.display = "none"; // 防止影响页面
                iframe.style.height = 0; // 防止影响页面
                iframe.src = item;
                document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
                // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
                setTimeout(() => {
                  iframe.remove();
                }, 5 * 60 * 1000);
              })
            }
            this.toggleSelection()

          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.underline {
  .mianOut {
    padding: 0 30px;
    .note {
      height: 42px;
      line-height: 42px;
      p {
        color: #666;
        padding-left: 42px;
        img {
          width: 26px;
          height: 26px;
          margin-right: 5px;
        }
      }
    }
    .asTitle {
      h3 {
        font-weight: bold;
        font-size: 16px;
        color: #666;
        padding: 20px 0 0 20px;
      }
    }
    .mianInner1 {
      background: #fff;
      padding-bottom: 30px;

      .asList {
        width: 300px;
        height: 49px;
        margin: 70px auto 20px;
        border: 1px solid #4080ff;
        border-radius: 8px;
        li {
          float: left;
          width: 50%;
          a {
            display: block;
            color: #666;
            height: 47px;
            text-align: center;
            line-height: 47px;
          }
          a.active {
            color: #fff;
            background: #4080ff;
          }
          a.active:hover {
            color: #fff;
          }
          a:hover {
            color: #4080ff;
          }
        }
        li:first-child {
          a {
            border-radius: 8px 0 0 8px;
          }
        }
        li:last-child {
          a {
            border-radius: 0 8px 8px 0;
          }
        }
      }

      .process {
        text-align: center;
        i {
          font-size: 20px;
          color: #69ed79;
          margin-right: 10px;
          position: relative;
          top: 3px;
        }
        a {
          text-decoration: underline;
          color: #666;
        }
        a:hover{
          color:#4080ff;
        }
      }

      .el-button:hover {
        opacity: 0.8;
      }
      .downBox {
        margin: 40px 0 20px;
        .table_tit {
          font-weight: bold;
          font-size: 16px;
          color: #666;
          float: left;
          margin-left: 100px;
          line-height: 36px;
        }
        .download {
          display: block;
          float: right;
          margin-right: 100px;
          width: 105px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          color: #4080ff;
          border-radius: 8px;
          background: #eefdf4;
          cursor: pointer;
          i {
            font-size: 18px;
            position: relative;
            top: 2px;
          }
        }
        .download:hover {
          opacity: 0.8;
        }
      }
      /*表格*/
      .el-table {
        width: calc(100% - 200px);
        margin: 0 auto;
        border-top: 1px solid #ebeef5;
        a {
          cursor: pointer;
        }
        a:hover {
          color: #4080ff;
        }
        .fileName {
          text-decoration: underline;
          color: #4080ff;
          cursor: pointer;
        }
        .fileName:hover {
          opacity: 0.8;
        }
        .el-button {
          border-radius: 8px;
          border-color: #eef4fd;
          background: #eef4fd;
          height: 36px;
          padding: 0;
          width: 85px;
          color: #4080ff;
        }

        .el-button:hover {
          background: #fff;
          border-color: #4080ff;
        }
        .temName,
        .matName {
          text-decoration: underline;
          color: #333;
        }
        .deleteBtn {
          color: #4080ff;
          margin-left: 10px;
        }
        .deleteBtn:hover {
          opacity: 0.8;
        }
      }

      .el-table th > .cell {
        color: #333333;
        font-weight: bold;
      }
    }
    .mianInner2 {
      background: #fff;
      padding-bottom: 80px;
      margin-top: 30px;

      p {
        line-height: 36px;
        font-weight: bold;
        font-size: 14px;
        color: #666;
        text-align: center;
        margin-top: 60px;

        i {
          font-size: 20px;
          color: #69ed79;
          margin-right: 10px;
          position: relative;
          top: 3px;
        }

        a {
          display: inline-block;
          margin-left: 25px;
          width: 150px;
          height: 36px;
          color: #fff;
          border-radius: 8px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
          font-weight: normal;
          background: #4080ff;
          background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
        }

        a:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
